<template>
    <div class="pet-form-container">
        <el-form :model="form" label-width="150px" class="pet-form">
            <div class="form-section grid">
                <div class="form-col" style="flex: 2">
                    <h3>宠物基本信息</h3>
                    <!--                    <img :src="chosePetInfo.mainImg" style="height: 100px;border: #f6c2c2 1px solid"-->
                    <!--                         v-if="chosePetInfo.mainImg"/>-->
                    <!--                    <img :src="chosePetInfo.coverImg" style="height: 100px;border: #f6c2c2 1px solid"-->
                    <!--                         v-if="chosePetInfo.coverImg"/>-->
                    <el-form-item label="选择宠物" required>
                        <div style="display: flex;gap: 20px">
                            <div v-for="item in petInfo">
                                <el-button @click="choseItem(item)">{{ item.petName }}</el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="宠物名称" required>
                        <div>{{ chosePetInfo.petName }}</div>
                    </el-form-item>
                    <el-form-item label="宠物年龄" required>
                        <div>{{ chosePetInfo.age }}</div>
                    </el-form-item>
                    <el-form-item label="宠物体重" required>
                        <div>{{ chosePetInfo.weight }}</div>
                    </el-form-item>
                    <el-form-item label="宠物大小" required>
                        <div>{{ chosePetInfo.size }}</div>
                    </el-form-item>
                    <el-form-item label="毛发长度" required>
                        <div>{{ chosePetInfo.hairLength }}</div>
                    </el-form-item>
                    <el-form-item label="毛发颜色" required>
                        <div>{{ chosePetInfo.color }}</div>
                    </el-form-item>
                    <el-form-item label="疾病历史" required>
                        <div>{{ chosePetInfo.medicalHistory }}</div>
                    </el-form-item>
                    <el-form-item label="体检历史" required>
                        <div>{{ chosePetInfo.allergyHistory }}</div>
                    </el-form-item>
                    <el-form-item label="日常喜号" required>
                        <div>{{ chosePetInfo.dietaryHabits }}</div>
                    </el-form-item>
                    <el-form-item label="活动行为" required>
                        <div>{{ chosePetInfo.activityPreferences }}</div>
                    </el-form-item>
                    <el-form-item label="睡眠习惯" required>
                        <div>{{ chosePetInfo.sleepHabits }}</div>
                    </el-form-item>
                    <el-form-item label="运动习惯" required>
                        <div>{{ chosePetInfo.sportHabits }}</div>
                    </el-form-item>
                    <el-form-item label="宠物性别" required>
                        <div>{{ chosePetInfo.gender }}</div>
                    </el-form-item>
                    <el-form-item label="宠物生日" required>
                        <div>{{ chosePetInfo.dateOfBirth }}</div>
                    </el-form-item>

                </div>
                <div class="form-col" style="background-color: rgba(222,222,222,0.34);flex: 3">
                    <div style="background-color: #f5f5f5;padding: 10px">
                        <h3>体检指标</h3>
                        <el-form-item label="身高" required>
                            <el-input v-model="form.height" placeholder="请输入身高"></el-input>
                        </el-form-item>
                        <el-form-item label="重量" required>
                            <el-input v-model="form.weight" placeholder="请输入重量"></el-input>
                        </el-form-item>
                        <el-form-item label="心率" required>
                            <el-input v-model="form.heartRate" placeholder="请输入心率"></el-input>
                        </el-form-item>
                        <el-form-item label="呼吸频率" required>
                            <el-input v-model="form.respiratoryRate" placeholder="请输入呼吸频率"></el-input>
                        </el-form-item>
                        <el-form-item label="体温" required>
                            <el-input v-model="form.temperature" placeholder="请输入体温"></el-input>
                        </el-form-item>
                        <el-form-item label="血压" required>
                            <el-input v-model="form.bloodPressure" placeholder="请输入血压"></el-input>
                        </el-form-item>
                    </div>
                    <div style="background-color: #e0ffff;padding: 10px">
                        <h3>检查结果记录</h3>
                        <el-form-item label="血液检查结果" required>
                            <el-input v-model="form.bloodtestResults"
                                      placeholder="请输入血液检查结果"></el-input>
                        </el-form-item>
                        <el-form-item label="尿液检查结果" required>
                            <el-input v-model="form.urinetestResults"
                                      placeholder="请输入尿液检查结果"></el-input>
                        </el-form-item>
                        <el-form-item label="X光检查结果" required>
                            <el-input v-model="form.xrayResults" placeholder="请输入X光检查结果"></el-input>
                        </el-form-item>
                        <el-form-item label="超声波结果" required>
                            <el-input v-model="form.ultrasoundResults" placeholder="请输入超声波结果"></el-input>
                        </el-form-item>
                    </div>
                    <div style="background-color: #f0ffff;padding: 10px">
                        <h3>医生建议</h3>
                        <el-form-item label="诊断结果" required>
                            <el-input v-model="form.diagResult" placeholder="请输入诊断结果"></el-input>
                        </el-form-item>
                        <el-form-item label="治疗方案" required>
                            <el-input v-model="form.treatmentPlan" placeholder="请输入治疗方案"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" required>
                            <el-input type="textarea" v-model="form.notes" placeholder="请输入备注"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间" required>
                            <el-date-picker v-model="form.creationTime" type="datetime" placeholder="选择日期时间"
                                            class="date-picker"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="健康结果" required>
                            <el-input v-model="form.healthResult" placeholder="请输入健康结果"></el-input>
                        </el-form-item>
                        <el-select v-model="form.docId" placeholder="选择医生">
                            <el-option
                                    v-for="item in docList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-form-item label="选择检查类型" required>
                            <el-radio-group v-model="choseDate2" class="filter-group">
                                <el-radio-button label="常规体检" @click="this.form.type=1">常规体检</el-radio-button>
                                <el-radio-button label="专项检查" @click="this.form.type=2">专项检查</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm">保存记录</el-button>
                <el-button @click="getTotalInfoById()">生成报告</el-button>
                <el-button type="text" @click="goto('PhysicalHistory')">历史体检记录</el-button>
            </el-form-item>
        </el-form>
        <!--体检报告-->
        <el-dialog v-if="dialogVisible" v-model="dialogVisible">
            <el-container>
                <el-header>
                    <h2>体检报告</h2>
                    <p>登记号：PET{{ formReport.reportTime }}</p>
                    <p>创建时间：{{ formReport.createdAt }}</p>
                    <el-tag type="success">健康</el-tag>
                </el-header>

                <el-main style="margin-top: 50px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card>
                                <div>体重</div>
                                <div> {{ formReport.weight }}kg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>体温</div>
                                <div>{{ formReport.temperature }}°C</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>心率</div>
                                <div>{{ formReport.heartRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>呼吸频率</div>
                                <div>{{ formReport.respiratoryRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-card>
                                <div>血压</div>
                                <div>{{ formReport.bloodPressure }} mmHg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>身高</div>
                                <div>{{ formReport.height }}cm</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-collapse>
                        <el-collapse-item title="血液检查结果" name="1">
                            <div>{{ formReport.bloodtestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="尿液检查结果" name="2">
                            <div>{{ formReport.urinetestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="X光检查结果" name="3">
                            <div>{{ formReport.xrayResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="超声波结果" name="4">
                            <div>{{ formReport.ultrasoundResults }}</div>
                        </el-collapse-item>
                    </el-collapse>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-card>
                        <h3>诊断结果</h3>
                        <p>
                            {{ formReport.diagResult }}
                        </p>
                        <h3>治疗方案</h3>
                        <p>
                            {{ formReport.treatmentPlan }}
                        </p>
                        <h3>备注</h3>
                        <p>
                            {{ formReport.notes }}
                        </p>
                    </el-card>
                </el-main>
            </el-container>
        </el-dialog>
    </div>
</template>

<script>
import {addPetHealthExaminationRecord, getDocList, getPetListAPI, getTotalInfoById} from "@/api/petApi";
import {parseTime, parseTime2, parseTime4} from "@/utils/timeUtil";
import {ElNotification} from "element-plus";
import {goto} from "@/utils/pathUtil";

export default {
    data() {
        return {
            choseDate2: null,
            petInfo: [],
            index: 0,
            TotalInfoById: {
                petId: '',
                userId: '',
                petName: '',
                petGender: '',
                petAge: '',
                petWeight: '',
                petSpecis: '',
                petDateOfBirth: '',
                petSize: '',
                petHairLength: '',
                petColor: '',
                petMedicalHistory: '',
                petAllergyHistory: '',
                petDietaryHabits: '',
                petActivityPreferences: '',
                petSleepHabits: '',
                petSportHabits: '',
                exaHeight: '',
                exaWeight: '',
                exaRespiratoryRate: '',
                exaTemperature: '',
                exaHeartRate: '',
                exaBloodPressure: '',
                exaBloodtestResults: '',
                exaUrinetestResults: '',
                exaXRayResults: '',
                exaUltrasoundResults: '',
                exaDiagResult: '',
                exaTreatmentPlan: '',
                exaNotes: '',
                exaHealthResult: ''
            },
            chosePetInfo: {
                petId: '',
                userId: '',
                petName: '',
                specis: '',
                age: '',
                weight: '',
                gender: '',
                dateOfBirth: '',
                size: '',
                hairLength: '',
                color: '',
                vaccinationRecond: '',
                dewormingRecord: '',
                medicalHistory: '',
                allergyHistory: '',
                personalityTraits: '',
                dietaryHabits: '',
                activityPreferences: '',
                sleepHabits: '',
                sportHabits: '',
                mainImg: '',
                imgs: '',
                coverImg: ''
            },
            form: {
                petId: '',
                docId: '',
                height: '',
                weight: '',
                heartRate: '',
                respiratoryRate: '',
                temperature: '',
                bloodPressure: '',
                bloodtestResults: '',
                urinetestResults: '',
                xrayResults: '',
                ultrasoundResults: '',
                diagResult: '',
                treatmentPlan: '',
                notes: '',
                healthResult: ''
            },
            formReport: {
                petId: '',
                docId: '',
                height: '',
                weight: '',
                heartRate: '',
                respiratoryRate: '',
                temperature: '',
                bloodPressure: '',
                bloodtestResults: '',
                urinetestResults: '',
                xrayResults: '',
                ultrasoundResults: '',
                diagResult: '',
                treatmentPlan: '',
                notes: '',
                healthResult: ''
            },
            docList: [],
            reportVisible: false,
            dialogVisible: false,
        };
    },
    methods: {
        goto,
        getDocs() {
            getDocList().then(res => {
                this.docList = res.data
            })
        },
        choseItem(item) {
            this.chosePetInfo = item
            this.form.petId = item.petId
        },
        getMyPets() {
            getPetListAPI().then(res => {
                res.data.forEach(v => {
                    v.dateOfBirth = parseTime2(v.dateOfBirth)
                    v.gender = v.gender === 0 ? '公' : '母'
                })
                this.petInfo = res.data
            })
        },
        getTotalInfoById() {
            this.dialogVisible = true
            getTotalInfoById(this.form.petId).then(res => {
                this.formReport = res.data.examinationRecordList[res.data.examinationRecordList.length - 1]
                this.formReport.reportTime = parseTime4(this.formReport.createdAt)
                this.formReport.createdAt = parseTime(this.formReport.createdAt)
            })
        },
        submitForm() {
            // 定义必须填写的字段
            const requiredFields = {
                petId: '宠物ID',
                height: '身高',
                weight: '体重',
                heartRate: '心率',
                respiratoryRate: '呼吸频率',
                temperature: '体温',
                bloodPressure: '血压',
                docId: '医生'
            };

            // 遍历检查是否有空值
            for (let key in requiredFields) {
                if (!this.form[key]) {
                    ElNotification({
                        title: `${requiredFields[key]} 不能为空`,
                        type: "error",
                    })
                    return;
                }
            }

            if (this.form.petId === '' || this.form.petId === null) {
                ElNotification({
                    title: "请选择宠物",
                    type: "error",
                })
                return;
            }
            addPetHealthExaminationRecord(this.form).then(res => {
                this.form = {
                    id: '',
                    petId: this.chosePetInfo.petId,
                    height: '',
                    weight: '',
                    heartRate: '',
                    respiratoryRate: '',
                    temperature: '',
                    bloodPressure: '',
                    bloodtestResults: '',
                    urinetestResults: '',
                    xrayResults: '',
                    ultrasoundResults: '',
                    diagResult: '',
                    treatmentPlan: '',
                    notes: '',
                    healthResult: ''
                },
                    ElNotification({
                        title: "添加体检记录成功",
                        type: "success",
                    })
            })
            this.reportVisible = !this.reportVisible
        }
    }, mounted() {
        this.getMyPets()
        this.getDocs()
    }
};
</script>

<style scoped>
.pet-form-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pet-form {
    padding: 20px;
}

.form-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.form-col {
    margin-bottom: 20px;
    border-radius: 8px;
}

.form-col h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
}

.pet-form .el-form-item {
    margin-bottom: 20px;
}

.pet-form .el-input,
.pet-form .el-select,
.pet-form .el-radio-group,
.pet-form .el-date-picker,
.pet-form .el-textarea {
    width: 100%;
}

.select-width .el-input__inner {
    width: 100%;
}

.radio-group {
    display: flex;
    justify-content: space-between;
}

.date-picker {
    width: 100%;
}
</style>